<template>
	<div class="panel">
		<div class="condition">
			<div class="row_one">
				<el-select v-model="param.schoolYearId" clearable 
						   placeholder="全部学年" style="width: 1.8rem;" >
				    <el-option v-for="item in schoolYearList" :key="item.schoolYearId"
				      		   :label="item.name" :value="item.schoolYearId">
				    </el-option>
				</el-select>
				&nbsp;
				<el-select v-model="param.status" clearable 
						   placeholder="全部状态" style="width: 1.8rem;" >
				    <el-option label="已毕业" value="1"></el-option>
				    <el-option label="待毕业" value="2"></el-option>
				    <el-option label="已离园" value="3"></el-option>
				    <el-option label="待离园" value="4"></el-option>
				</el-select>
				&nbsp;
				<el-input style="width: 3.5rem;" placeholder="搜索 学员姓名/手机号/联系人" clearable
	   				 		  v-model="param.keyword" class="input_search" maxlength="100">
	  			</el-input>
	  			&nbsp;
	  			<div class="search_btn" @click="search()">搜索</div>
			</div>
		</div>
		
		<div>
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 2rem;">学员姓名</td>
						<td style="width: 4rem;">申请日期</td>
						<td style="width: 2rem;">所在班级</td>
						<td style="width: 2rem;">毕业/离园日期</td>
						<td style="width: 2rem;">申请</td>
						<td style="width: 2rem;">联系电话</td>
						<td style="width: 2rem;">去向</td>
						<td style="width: 2rem;">状态</td>
						<td style="width: 2rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="item,index in studentList">
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>
							<template v-if="item.status==2 || item.status==4">
								<span class="operate_btn" @click="toDelete(item.clueChannelId)">取消</span>
								&nbsp;
							</template>
							<span class="operate_btn" @click="openEdit(item)">查看</span>
							
							
						</td>
					</tr> 
				</tbody>
			</table>
		</div>
		<el-pagination
	      layout="total, sizes, prev, pager, next, jumper"
	      :current-page="param.currPage"
	      @size-change="pageSizeChange"
      	  @current-change="pageIndexChange"
	      :total="count">
	    </el-pagination>
	</div>
</template>

<script>
var vm;
export default {
	data() {
		return {
			param : {
				campusId: this.$store.state.campusId,
				schoolYearId : "",
				status: "",
				keyword: "",
				currPage: 1,
				pageSize: 10
			},
			studentList : [],
			count: 0,
		}
	},
	computed : {
		schoolYearList: function() {
			return this.$parent.schoolYearList;
		},
	},
	methods : {
		search(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.studentList(vm.param).then(data => {
//				vm.studentList = data.list;
				vm.studentList = [{name:"小明",status:2},{name:"小明"},{name:"小明"}];
				vm.count = data.totalCount;
			})
		},
		campusChange() { //校区改变
			vm.param.campusId = vm.$store.state.campusId;
			vm.search();
		},
		pageSizeChange(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	},
	created() {
		vm = this;
		vm.search();
	}
}
</script>

<style scoped src="@/style/module/table.css"></style>
<style scoped>
	.panel {
		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #666666;
	}
	
	.condition {
		padding-bottom: 0.1rem;
	}
	.row_one {
		padding: 0.2rem 0 0.1rem 0;
		overflow: hidden;
	}
</style>